

//背景切换-弹窗
// 存数据
// name：命名 data：数据
function saveData(name, data) {
    localStorage.setItem(name, JSON.stringify({ 'time': Date.now(), 'data': data }))
  }
  
  // 取数据
  // name：命名 time：过期时长,单位分钟,如传入30,即加载数据时如果超出30分钟返回0,否则返回数据
  function loadData(name, time) {
    let d = JSON.parse(localStorage.getItem(name));
    // 过期或有错误返回 0 否则返回数据
    if (d) {
        let t = Date.now() - d.time
        if (t < (time * 60 * 1000) && t > -1) return d.data;
    }
    return 0;
  }
  
  // 上面两个函数如果你有其他需要存取数据的功能，也可以直接使用
  
  // 读取背景
  try {
    let data = loadData('blogbg', 1440)
    if (data) changeBg(data, 1)
    else localStorage.removeItem('blogbg');
  } catch (error) { localStorage.removeItem('blogbg'); }
  
  // 切换背景函数
  // 此处的flag是为了每次读取时都重新存储一次,导致过期时间不稳定
  // 如果flag为0则存储,即设置背景. 为1则不存储,即每次加载自动读取背景.
  function changeBg(s, flag) {
    let bg = document.getElementById('web_bg')
    if (s.charAt(0) == '#') {
        bg.style.backgroundColor = s
        bg.style.backgroundImage = 'none'
    } else bg.style.backgroundImage = s
    if (!flag) { saveData('blogbg', s) }
  }
  
  // 以下为2.0新增内容
  
  // 创建窗口
  var winbox = ''
  
  function createWinbox() {
    let div = document.createElement('div')
    document.body.appendChild(div)
    winbox = WinBox({
        id: 'changeBgBox',
        index: 999,
        title: "切换背景",
        x: "center",
        y: "center",
        minwidth: '300px',
        height: "60%",
        background: '#49b1f5',
        onmaximize: () => { div.innerHTML = `<style>body::-webkit-scrollbar {display: none;}div#changeBgBox {width: 100% !important;}</style>` },
        onrestore: () => { div.innerHTML = '' }
    });
    winResize();
    window.addEventListener('resize', winResize)
  
    // 每一类我放了一个演示，直接往下复制粘贴 a标签 就可以，需要注意的是 函数里面的链接 冒号前面需要添加反斜杠\进行转义
    winbox.body.innerHTML = `
    <div id="article-container" style="padding:10px;">
    
    <p><button onclick="localStorage.removeItem('blogbg');location.reload();" style="background:#5fcdff;display:block;width:100%;padding: 15px 0;border-radius:6px;color:white;"><i class="fa-solid fa-arrows-rotate"></i> 点我恢复默认背景</button></p>
    <h2 id="图片（手机）"><a href="#图片（手机）" class="headerlink" title="图片（手机）"></a>图片（手机）</h2>
    <div class="bgbox">
    <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://img.vm.laomishuo.com/image/2021/12/2021122715170589.jpeg)" class="pimgbox" onclick="changeBg('url(https\://img.vm.laomishuo.com/image/2021/12/2021122715170589.jpeg)')"></a>
    </div>
    
    <h2 id="图片（电脑）"><a href="#图片（电脑）" class="headerlink" title="图片（电脑）"></a>图片（电脑）</h2>
    <div class="bgbox">
    <a href="javascript:;" rel="noopener external nofollow" style="background-image:url(https://cn.bing.com/th?id=OHR.GBRTurtle_ZH-CN6069093254_1920x1080.jpg)" class="imgbox" onclick="changeBg('url(https\://cn.bing.com/th?id=OHR.GBRTurtle_ZH-CN6069093254_1920x1080.jpg)')"></a>
    </div>
    
    
    
    <h2 id="渐变色"><a href="#渐变色" class="headerlink" title="渐变色"></a>渐变色</h2>
    <div class="bgbox">
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #70dd2d, #e6f7b3)" onclick="changeBg('linear-gradient(to right, #70dd2d, #e6f7b3)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #883314, #6ebf24)" onclick="changeBg('linear-gradient(to right, #883314, #6ebf24)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #36ef37, #4cd533)" onclick="changeBg('linear-gradient(to right, #36ef37, #4cd533)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #477c85, #6fa196)" onclick="changeBg('linear-gradient(to right, #477c85, #6fa196)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #5941ac, #203f68)" onclick="changeBg('linear-gradient(to right, #5941ac, #203f68)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #6968df, #a3372f)" onclick="changeBg('linear-gradient(to right, #6968df, #a3372f)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #44f18e, #515ac5)" onclick="changeBg('linear-gradient(to right, #44f18e, #515ac5)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #e94476, #c6db21)" onclick="changeBg('linear-gradient(to right, #e94476, #c6db21)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #bd21b8, #0908c9)" onclick="changeBg('linear-gradient(to right, #bd21b8, #0908c9)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #f57cb8, #dcd261)" onclick="changeBg('linear-gradient(to right, #f57cb8, #dcd261)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #c5703c, #5a9d8b)" onclick="changeBg('linear-gradient(to right, #c5703c, #5a9d8b)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #c0e487, #a7fcca)" onclick="changeBg('linear-gradient(to right, #c0e487, #a7fcca)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #ce52c5, #0713cd)" onclick="changeBg('linear-gradient(to right, #ce52c5, #0713cd)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #2f6f63, #a49ed0)" onclick="changeBg('linear-gradient(to right, #2f6f63, #a49ed0)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #c6a312, #a71cdf)" onclick="changeBg('linear-gradient(to right, #c6a312, #a71cdf)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #342bb1, #14e431)" onclick="changeBg('linear-gradient(to right, #342bb1, #14e431)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #125ad2, #33b4c6)" onclick="changeBg('linear-gradient(to right, #125ad2, #33b4c6)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #89d748, #780d5a)" onclick="changeBg('linear-gradient(to right, #89d748, #780d5a)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #622870, #cb3d14)" onclick="changeBg('linear-gradient(to right, #622870, #cb3d14)')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: linear-gradient(to right, #2a2be4, #14a56a)" onclick="changeBg('linear-gradient(to right, #2a2be4, #14a56a)')"></a>  </div>
    
    <h2 id="纯色"><a href="#纯色" class="headerlink" title="纯色"></a>纯色</h2>
    <div class="bgbox">
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #83d56d" onclick="changeBg('#83d56d')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #8bfe42" onclick="changeBg('#8bfe42')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #2e3e9c" onclick="changeBg('#2e3e9c')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #2f84b5" onclick="changeBg('#2f84b5')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #e2f112" onclick="changeBg('#e2f112')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #d5023b" onclick="changeBg('#d5023b')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #ea35f1" onclick="changeBg('#ea35f1')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #55c8d9" onclick="changeBg('#55c8d9')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #fda3d4" onclick="changeBg('#fda3d4')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #21e9a0" onclick="changeBg('#21e9a0')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #3de640" onclick="changeBg('#3de640')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #ce5ddd" onclick="changeBg('#ce5ddd')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #fbbd74" onclick="changeBg('#fbbd74')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #cddea7" onclick="changeBg('#cddea7')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #9e3cca" onclick="changeBg('#9e3cca')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #174a24" onclick="changeBg('#174a24')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #eab027" onclick="changeBg('#eab027')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #0f5fd9" onclick="changeBg('#0f5fd9')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #59fb2e" onclick="changeBg('#59fb2e')"></a>
    <a href="javascript:;" rel="noopener external nofollow" class="box" style="background: #6cc9e1" onclick="changeBg('#6cc9e1')"></a>
    </div>
  `;
  }
  
  // 适应窗口大小
  function winResize() {
    let box = document.querySelector('#changeBgBox')
    if (!box || box.classList.contains('min') || box.classList.contains('max')) return // 2023-02-10更新
    var offsetWid = document.documentElement.clientWidth;
    if (offsetWid <= 768) {
        winbox.resize(offsetWid * 0.95 + "px", "90%").move("center", "center");
    } else {
        winbox.resize(offsetWid * 0.6 + "px", "70%").move("center", "center");
    }
  }
  
  // 切换状态，窗口已创建则控制窗口显示和隐藏，没窗口则创建窗口
  function toggleWinbox() {
    if (document.querySelector('#changeBgBox')) winbox.toggleClass('hide');
    else createWinbox();
  }